<template>
  <div class="articleList_page">
    <!-- <router-view v-if="$route.name !== 'article'"></router-view> -->
    <div>
      <el-card>
        <el-input placeholder="请输入文章名称" size="small" v-model="search.key" class="search_input">
          <el-button
            slot="append"
            size="small"
            type="primary"
            icon="el-icon-search"
            @click="queryData"
          ></el-button>
        </el-input>
        <el-date-picker
          class="search_time"
          v-model="search.date"
          type="daterange"
          size="small"
          @change="queryData"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
        <el-button
          class="f-r"
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="addOrEditArticle"
        >新增文章</el-button>
      </el-card>
      <el-card class="m-t-10">
        <el-table :data="tableData" border size="mini">
          <el-table-column prop="id" label="编号" width="100"></el-table-column>
          <el-table-column prop="name" label="名称" width="200"></el-table-column>
          <el-table-column prop="status" label="状态" width>
            <template slot-scope="scope">
              <el-tag type="success" v-if="scope.row.status == 1">上架</el-tag>
              <el-tag type="info" v-if="scope.row.status == 0">下架</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="clickNum" label="文章点击量" width></el-table-column>
          <el-table-column prop="updateAt" label="更新时间" width></el-table-column>
          <el-table-column prop="url" label="文章地址" width>
            <template slot-scope="scope">
              <a :href="scope.row.url" style="color: #189cfb;">{{scope.row.url}}</a>
            </template>
          </el-table-column>
          <el-table-column prop="handle" label="操作" width>
            <template slot-scope="scope">
              <el-button type="text" size="small" v-if="scope.row.status == 0" @click="upOrDownArticle(scope.row)">上架</el-button>
              <el-button type="text" size="small" v-if="scope.row.status == 1" @click="upOrDownArticle(scope.row)">下架</el-button>
              <el-button type="text" size="small" @click="delArticle(scope.row)">删除</el-button>
              <el-button type="text" size="small" @click="addOrEditArticle(scope.row,1)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="m-t-10">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="40"
            layout="total, prev, pager, next"
            :total="totalNum"
          ></el-pagination>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getArticleList, downOrUpArticle, deleteArticle } from "@/api/article";
export default {
  name: "",
  data() {
    return {
      search: {
        key: "",
        date: []
      },
      currentPage: 1,
      totalNum: 0,
      tableData: []
    };
  },
  created() {
    this.queryData();
  },
  methods: {
    queryData() {
      let param = {
        name: this.search.key,
        startTime: this.search.date.length > 0 ? this.search.date[0] : "",
        endTime: this.search.date.length > 0 ? this.search.date[1] : "",
        currentPage: this.currentPage,
        pagePerNum: 40
      };
      getArticleList(param).then(res => {
        const data = res.data
        this.tableData = data.data
        this.totalNum = data.totalNum
      });
    },
    upOrDownArticle(row) {
      this.$confirm(
        row.status == 0 ? "确定上架该文章吗？" : "确定下架该文章吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          downOrUpArticle({ id: row.id, status: row.status == 1 ? 0 : 1 }).then(
            res => {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.queryData()
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    delArticle(row) {
        this.$confirm('是否删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteArticle({ id: row.id}).then(
            res => {
              this.$message({
                type: "success",
                message: "操作成功!"
              });
              this.queryData()
            }
          ).catch( err => {
              console.log(err)
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    addOrEditArticle(row,type) {
      this.$router.push({ name: "editArticle", query:{id:(type?row.id:'')}});
    },
    handleCurrentChange(val) {
        this.pagePerNum = val
        this.queryData()
    }
  }
};
</script>
<style lang='scss' scoped>
.search_input {
  width: 250px;
  .el-button {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
    border-radius: 0px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}
.search_time {
  width: 300px;
  margin-left: 20px;
}
</style>